<!--
 * @Descripttion: 多行文本框
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 14:18:01
 * @LastEditors: GW
 * @LastEditTime: 2021-10-13 10:50:35
-->
<template>
    <section class="show-wrapper">
        <template v-if="data">
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">{{data.title?data.title:'文本框'}}</span>
            </div>
            <a-textarea size="large" v-model="data.value" :rows="5" class="text-area" />
        </template>
        <template v-else>
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">文本框</span>
            </div>
            <a-textarea size="large" :rows="5" />
        </template>

    </section>
</template>

<script>
export default {
    name: 'Textarea',
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    mounted () {
        //组件默认数据
        let { data } = this;
        let defaultData = {
            title: data.title ? data.title : '文本框',
            onEdit: true,

        }
        this.data = Object.assign(data, defaultData);
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding:6px 12px;
        .title-box {
            position: relative;
            height: 32px;
            line-height: 32px;
            .title-name {
                color: #333;
            }
        }

        .required::after {
            position: absolute;
            content: '*';
            top: 2px;
            margin-left: 2px;
            font-size: 16px;
            color: red;
            font-family: 'SimSun,sans-serif';
        }
        .text-area {
            resize: none;
        }
    }
</style>
<style scoped>
    .ant-input {
        border-radius: 0 !important;
    }
</style>